<template>
	<view v-if="orderInfo && show">
		<bottomBar>
			<view class="order-bottom-bar">
				<view class="countDownTime" v-if="countDownTime">
					<image style="width:25rpx;height:28rpx;margin-right:10rpx" src="https://imgs.bestwehotel.com/images/inn/1bpaxgG6rb"/>
					剩余时间: {{countDownTime}}
				</view>
				<view class="bts">
					<basic-button v-if="orderInfo.showPaying" class="bt-item" type="primary" height="64rpx" width="180rpx" border @click="gotoPay()"  >立即支付</basic-button>
					<basic-button v-if="orderInfo.showCancel" class="bt-item" type="cancel" height="64rpx" width="180rpx" border @click="refundOrder()" >
						{{orderInfo.orderStatus === 1001?'取消订单':'申请退款'}}
					</basic-button>
					<!-- <basic-button v-if="orderInfo.showVenue" class="bt-item" type="primary" height="64rpx" width="180rpx" border @click="gotoAppointmentUrl()" >预约入园</basic-button> -->
					<basic-button v-if="orderInfo.showRefund" class="bt-item" type="primary" height="64rpx" width="180rpx" border @click="showRefundListFn()" >退款记录</basic-button>			
				</view>				
			</view>
		</bottomBar>
	</view>
</template>
<script>
import bottomBar from '@/components/business/bottom-bar'
import countDown from 'utils/helper/count-down'
import goPay from 'utils/goPay'
import sdk from 'sdk'
import {cancelOrder} from 'api'
export default {
	name: 'order-bottom-bar',	
	components: { bottomBar },
	props: {
		orderInfo : { type: Object, default:()=>{return null} }
	},
	watch: {
		orderInfo(orderInfo){
			this.show = false
			if(orderInfo.showPaying || orderInfo.showCancel || orderInfo.showVenue || orderInfo.showRefund){
				this.show = true
			}
			if(orderInfo.orderStatus === 1001 || orderInfo.showPaying || orderInfo.showCancel || orderInfo.showVenue) this.show=true	
			if(orderInfo.orderStatus === 1001){
				if (this.timeCounter) { // 防止生成多个计时器相互干扰
					clearInterval(this.timeCounter)
					this.timeCounter = null
				}

				this.timeCounter = countDown(orderInfo.payExpireTime, 250,(time)=>{
					this.countDownTime = (time.dd? (time.dd+'天 ') :'' ) + time.hh+':'+time.MM+':'+time.ss
				})
			} else{
				this.countDownTime = null
			}
			
		}
	},
	data() {
		return {
			show: false,
			countDownTime:null,
		}
	},
	mounted(){
	},
	methods: {
		gotoPay(){
			goPay(this.orderInfo.orderNo, 'navigate')
		},
		refundOrder() {
			if(this.orderInfo.orderStatus === 1001) { // 未支付取消订单
				sdk.showLoading()
				cancelOrder({orderNo: this.orderInfo.orderNo}).then(ret => {
					sdk.hideLoading()
					if (ret && ret.code === 0) {
						// 取消成功刷新页面
						sdk.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 2000
						})
						this.$emit('refreshOrderInfo')
					} else {
						sdk.showToast({
							title: '取消失败',
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(() => {
					sdk.hideLoading()
					sdk.showToast({
						title: '取消失败',
						icon: 'none',
						duration: 2000
					})
				})
			} else { // 已支付订单退款
				// 跳转到退款页面
				sdk.navigateTo({
					url: '/packageOrder/pages/refund/index?orderNo=' + this.orderInfo.orderNo
				})
			}
			
		},
		gotoAppointmentUrl(){
			// this.action.autoJumpPage(this.orderInfo.appointmentUrl)
		},
		showRefundListFn() {
			this.$emit('showRefundDetail')
		},
	},
	beforeDestroy() {
		clearInterval(this.timeCounter)
	}
}
</script>
<style lang="less">
.order-bottom-bar{
	padding: 0 20rpx 0 30rpx;
	height: 100%;
	width: 100%;
	.countDownTime{
		height: 100%;
		float: left;
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 28rpx;
	}
	.bts{
		height: 100%;
		float: right;
		display: flex;
		align-items: center;
		.bt-item{
			margin-right: 10rpx;
		}
	}
}
</style>